vue后台管理(一):项目搭建 |
您所在的位置:网站首页 › vue cli创建项目步骤 › vue后台管理(一):项目搭建 |
最近准备学习下后台管理系统的搭建,并且采用现在流行的前后端分离的架构,那么vue自然就是首选了。 这里我只讲一些实战操作,一些基础的语法各位就自己去学习了。包括环境的安装,如node的安装,请自行百度。 安装vue-cli脚手架假设你已经安装好node的环境,那么就可以开始使用npm命令大展拳脚了。通过以下命令安装vue-cli npm install -g @vue/cli 创建项目这里我主要是通过vue的界面化创建项目。在命令窗口输入vue界面化的启动命令 vue ui 就会自动在浏览器打开项目创建和管理的界面
上图是项目的预设,就是类似项目需要什么插件依赖已经都加入进来了,如果你之前创建过项目并且保存过预设,对应的预设名称就会出现在这里,因为是第一次创建,我们选择手动。下一步
因为选择我打算使用element-ui作为界面ui,所以这里我们需要配置一下element-ui。在插件栏里面选择“添加插件”,搜索element-ui插件并选中,点击安装vue-cli-plugin-element开始安装。如下图 第一个让你选择是完整引入还是按需引入,这里我们选择import on demand按需引入。然后点击完成安装,这样element-ui插件就安装完成了。 安装axios依赖(网络请求库)选择依赖栏==》安装依赖,找到axios进行安装,记住这里选择的是运行依赖。如下图 这里我们项目也就算简单搭建好了,选择任务–》serve --》运行,运行完成之后选择启动app,如下图 出现如下页面,所以项目已经正常跑起来了。 1.修改app.vue app.vue 2.清空views和components文件夹里面的内容,在views文件夹创建home/index.vue文件 home/index.vue hell0, vue!! export default { data () { return { } } }注:这里我们用的style lang=“less”,所以需要按照开发依赖less和less-loader,这里就不具体说的,方法同上。 3.修改路由router router/index.vue import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/home' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home } ] const router = new VueRouter({ routes }) export default router重新启动app 欢迎关注本人公众号和小程序,谢谢 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |